{% extends "profile/base.html" %}

{% block title %}错误处理测试{% endblock %}

{% block extra_css %}
<style>
    .test-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none;
        border-radius: 10px;
        overflow: hidden;
    }
    
    .test-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .test-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .error-404 { color: #6c757d; }
    .error-500 { color: #dc3545; }
    .error-403 { color: #ffc107; }
    .error-401 { color: #fd7e14; }
    .error-400 { color: #17a2b8; }
    .error-ajax { color: #6f42c1; }
    .error-permission { color: #20c997; }
    .error-json { color: #6610f2; }
    
    .test-description {
        font-size: 0.9rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    
    .test-button {
        border-radius: 20px;
        padding: 8px 20px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .test-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .ajax-form {
        display: inline-block;
    }
    
    .json-test-form {
        margin-top: 1rem;
    }
    
    .json-test-form textarea {
        min-height: 120px;
        font-family: monospace;
        font-size: 0.9rem;
    }
    
    .json-result {
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 5px;
        background-color: #f8f9fa;
        font-family: monospace;
        font-size: 0.9rem;
        display: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="text-center mb-5">
                <h1 class="display-4 fw-bold">错误处理测试</h1>
                <p class="lead text-muted">测试各种错误处理功能和自定义错误页面</p>
            </div>
            
            <div class="row g-4">
                <!-- HTTP错误测试 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card test-card h-100">
                        <div class="card-body text-center">
                            <div class="test-icon error-404">
                                <i class="fas fa-search"></i>
                            </div>
                            <h5 class="card-title">404 错误</h5>
                            <p class="test-description">测试页面未找到错误处理</p>
                            <a href="/test/404" class="btn btn-outline-secondary test-button">触发 404</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4">
                    <div class="card test-card h-100">
                        <div class="card-body text-center">
                            <div class="test-icon error-500">
                                <i class="fas fa-exclamation-triangle"></i>
                            </div>
                            <h5 class="card-title">500 错误</h5>
                            <p class="test-description">测试服务器内部错误处理</p>
                            <a href="/test/500" class="btn btn-outline-danger test-button">触发 500</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4">
                    <div class="card test-card h-100">
                        <div class="card-body text-center">
                            <div class="test-icon error-403">
                                <i class="fas fa-ban"></i>
                            </div>
                            <h5 class="card-title">403 错误</h5>
                            <p class="test-description">测试禁止访问错误处理</p>
                            <a href="/test/403" class="btn btn-outline-warning test-button">触发 403</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4">
                    <div class="card test-card h-100">
                        <div class="card-body text-center">
                            <div class="test-icon error-401">
                                <i class="fas fa-lock"></i>
                            </div>
                            <h5 class="card-title">401 错误</h5>
                            <p class="test-description">测试未授权错误处理</p>
                            <a href="/test/401" class="btn btn-outline-info test-button">触发 401</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4">
                    <div class="card test-card h-100">
                        <div class="card-body text-center">
                            <div class="test-icon error-400">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <h5 class="card-title">400 错误</h5>
                            <p class="test-description">测试错误请求处理</p>
                            <a href="/test/400" class="btn btn-outline-primary test-button">触发 400</a>
                        </div>
                    </div>
                </div>
                
                <!-- AJAX错误测试 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card test-card h-100">
                        <div class="card-body text-center">
                            <div class="test-icon error-ajax">
                                <i class="fas fa-code"></i>
                            </div>
                            <h5 class="card-title">AJAX 错误</h5>
                            <p class="test-description">测试AJAX请求错误处理</p>
                            <form class="ajax-form" action="/test/ajax-error" method="post">
                                <input type="hidden" name="ajax" value="1">
                                <button type="submit" class="btn btn-outline-purple test-button" style="color: #6f42c1; border-color: #6f42c1;">
                                    触发 AJAX 错误
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- 权限测试 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card test-card h-100">
                        <div class="card-body text-center">
                            <div class="test-icon error-permission">
                                <i class="fas fa-user-shield"></i>
                            </div>
                            <h5 class="card-title">管理员权限</h5>
                            <p class="test-description">测试管理员权限装饰器</p>
                            <a href="/test/admin" class="btn btn-outline-success test-button">测试管理员</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6 col-lg-4">
                    <div class="card test-card h-100">
                        <div class="card-body text-center">
                            <div class="test-icon error-permission">
                                <i class="fas fa-key"></i>
                            </div>
                            <h5 class="card-title">特殊权限</h5>
                            <p class="test-description">测试自定义权限装饰器</p>
                            <a href="/test/permission" class="btn btn-outline-info test-button">测试权限</a>
                        </div>
                    </div>
                </div>
                
                <!-- JSON验证测试 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card test-card h-100">
                        <div class="card-body text-center">
                            <div class="test-icon error-json">
                                <i class="fas fa-file-code"></i>
                            </div>
                            <h5 class="card-title">JSON 验证</h5>
                            <p class="test-description">测试JSON验证装饰器</p>
                            <form class="json-test-form" action="/test/json" method="post">
                                <div class="mb-3">
                                    <textarea name="json_data" class="form-control" placeholder='{"username": "test", "password": "123456"}'>{
  "username": "test",
  "password": "123456"
}</textarea>
                                </div>
                                <button type="submit" class="btn btn-outline-purple test-button" style="color: #6610f2; border-color: #6610f2;">
                                    测试 JSON 验证
                                </button>
                            </form>
                            <div id="json-result" class="json-result"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-5 text-center">
                <a href="{{ url_for('profile.dashboard') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-left me-2"></i>返回控制台
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 处理AJAX表单提交
    document.querySelector('.ajax-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 添加AJAX请求头
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/test/ajax-error', true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                try {
                    var response = JSON.parse(xhr.responseText);
                    alert('AJAX错误响应: ' + response.message);
                } catch (e) {
                    alert('发生错误，状态码: ' + xhr.status);
                }
            }
        };
        
        xhr.send('ajax=1');
    });
    
    // 处理JSON验证表单
    document.querySelector('.json-test-form').addEventListener('submit', function(e) {
        e.preventDefault();
        
        var jsonText = this.querySelector('textarea[name="json_data"]').value;
        var resultDiv = document.getElementById('json-result');
        
        try {
            var jsonData = JSON.parse(jsonText);
            
            // 创建AJAX请求
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/test/json', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    try {
                        var response = JSON.parse(xhr.responseText);
                        resultDiv.textContent = JSON.stringify(response, null, 2);
                        resultDiv.style.display = 'block';
                        resultDiv.style.backgroundColor = '#d4edda';
                        resultDiv.style.color = '#155724';
                    } catch (e) {
                        resultDiv.textContent = '响应解析错误: ' + e.message;
                        resultDiv.style.display = 'block';
                        resultDiv.style.backgroundColor = '#f8d7da';
                        resultDiv.style.color = '#721c24';
                    }
                }
            };
            
            xhr.send(JSON.stringify(jsonData));
        } catch (e) {
            resultDiv.textContent = 'JSON格式错误: ' + e.message;
            resultDiv.style.display = 'block';
            resultDiv.style.backgroundColor = '#f8d7da';
            resultDiv.style.color = '#721c24';
        }
    });
</script>
{% endblock %}